<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style>
        .attr{
            border:1px solid gray;
            width: 200px;
            margin-bottom: 10px;
        }
        .title{
            border-bottom: 1px solid gray;
        }
        .button{
            width: 100px;
            border:1px solid black;
        }
        .on{
            background-color: yellow;
        }
        .notallow{
            background-color: gray;
        }
    </style>
</head>
<body>
    <div>属性数据：</br><span id="attrdata"></span></div>
    <div>sku数据：</br><span id="skudata"></span></div>
    <div id="select_main_area"></div>
    <div>价格：<span id="price"></span></div>
    <div>库存：<span id="stock"></span></div>
    <div>sku号：<span id="skuno"></span></div>
</body>
<!-- 
    我们先要明确要达到的效果
        1.什么都没选的时候要禁用某些按钮
        2.开始选择某些按钮后，把点击后无法找到sku的按钮禁用，把可以组合的留着
    


 -->
<!-- 数据源 可切换1 2 -->
<script src="data_resource1.js"></script>
<!-- 工具函数 -->
<script src="tool_functions.js"></script>
<!-- 算法 可优化-->
<script src="caculate3.js"></script>
<script>
    //渲染选框
    function renderSelectArea(attr_array){
        var html = '';
        for(var attr in attr_array) {
            html += '<div class="attr"><div class="title">'+attr+'</div><ul>';
            attr_array[attr].forEach(v=>{
                html += '<li class="button" id="'+attr+'-'+v+'">'+v+'</li>';
            });
            html += '</ul></div>';
        }
        $('#select_main_area').html(html);
    };
    renderSelectArea(my_attr_array);
    function renderSkuData(sku_data){
        var html = '';
        sku_data.forEach(v=>{
            html += JSON.stringify(v)+'</br>';
        });
        $('#skudata').html(html);
    }
    renderSkuData(my_skus);
    function renderAttrData(attr_data){
        var html = JSON.stringify(attr_data);
        $('#attrdata').html(html);
    }
    renderAttrData(my_attr_array);
    
    //声明一些东西
    var now_select_status = {};
    var attr_number = obj_length(my_attr_array);
    var now_sku = {};

    //第一次刷新  也可以在这里设置第一次刷新就不能点的按钮直接隐藏掉
    console.log('----------初始化刷新');
    refreshButton({});

    //绑定单击，操作入口
    $('li').on('click',function(){
        if($(this).hasClass('notallow')){//灰色点了也白点
            return;
        }

        var this_button = $(this).attr('id');
        let [this_attr,this_value] = this_button.split('-');
        let e = {};
        e[this_attr]=this_value
        
        if(now_select_status[this_attr]!=undefined){
            if(now_select_status[this_attr]==this_value){
                console.log('----------取消选择');
                $('li#'+this_attr+'-'+now_select_status[this_attr]).removeClass('on');
                delete now_select_status[this_attr];
                if(obj_length(now_select_status)==0){
                    console.log('----------全部取消');
                    refreshButton({});
                    return;
                }else if(obj_length(now_select_status)==1){
                    console.log('----------取消到只剩1个');
                    refreshButton({},true);
                    return;
                }else{
                    e= obj_pop(now_select_status);
                }
            }else{
                console.log('----------更换选择');
                $('li#'+this_attr+'-'+now_select_status[this_attr]).removeClass('on');
                $(this).addClass('on');
                now_select_status[this_attr] = this_value;  
            }
        }else{
            console.log('----------选择属性');
            $(this).addClass('on');
            now_select_status[this_attr] = this_value;
        }

        //刷新按钮
        refreshButton(e);
    });
    //中间公共代码
    function refreshButton(e,is_onlyone = false){
        //计算哪些能点哪些不能
        console.log('now_select_status',now_select_status);
        var _now_select_status = now_select_status;
        if(is_onlyone){
            _now_select_status = {};
        }
        let[allowed_buttons,not_allowed_buttons] = caculate_button(my_skus,my_attr_array,_now_select_status,e);
        // console.log('不可用按钮',not_allowed_buttons);
        //去更新灰色
        not_allowed_buttons.forEach(button=>{
            $('li#'+button).addClass('notallow');
        });
        allowed_buttons.forEach(button=>{
            $('li#'+button).removeClass('notallow');
        });

        //如果每个属性都选择了，就可以读取价格库存等信息了
        var is_every_attr_selected = obj_length(my_attr_array) == obj_length(now_select_status);
        if(!is_every_attr_selected){
            console.log('结果：未确定所有属性，当前sku未确定');
            now_sku = {};
            $('#price').text('---');
            $('#stock').text('---');
            $('#skuno').text('---');
        }else{
            now_sku = get_now_sku(my_skus,now_select_status);
            console.log('当前SKU确定为',now_sku);
            $('#price').text(now_sku.price);
            $('#stock').text(now_sku.stock);
            $('#skuno').text(now_sku.skuno);
        }
    }    
    //全部属性都选了的情况下，确定价格和库存
    function get_now_sku(skus,select_data){
        var now_sku;
        skus.forEach(one_sku=>{
            //已选属性 匹配 sku
            var all_macth = true;
            for(var s_attr in select_data){
                if(one_sku.attr[s_attr] != select_data[s_attr]){
                    var all_macth = false;//但凡有一条不对就不匹配
                }
            }
            if(all_macth){
                now_sku =  one_sku;
            }
        });
        return now_sku;
    }
</script>    
</html>